<template>
    <div class="app-container calendar-list-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
          <el-input clearable class="filter-item" style="width: 200px;" placeholder="店铺名称" v-model="listQuery.name"></el-input>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
          <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>

          <el-table-column align="center" min-width="120px" label="平台编号" prop="platformId">
          </el-table-column>
          <el-table-column align="center" min-width="120px" label="商户账号" prop="merId">
          </el-table-column>
          <el-table-column align="center" min-width="130px" label="店铺名称" prop="name">
          </el-table-column>       
          <el-table-column align="center" min-width="150px" label="店铺封面照片" prop="logoImg">
          </el-table-column>       
          <el-table-column align="center" min-width="100px" label="区域" prop="area">
          </el-table-column>   
          <!-- <el-table-column align="center" min-width="200px" label="纬度" prop="latitude">
          </el-table-column>   
          <el-table-column align="center" min-width="200px" label="经度" prop="longitude">
          </el-table-column>    -->
          <el-table-column align="center" min-width="100px" label="附加信息" prop="conService">
          </el-table-column>   
          <el-table-column align="center" min-width="80px" label="人均消费" prop="perCapitaSpending">
          </el-table-column>   
          <el-table-column align="center" min-width="100px" label="公告" prop="bulletin">
          </el-table-column>   
          <el-table-column align="center" min-width="100px" label="电话" prop="conMobile">
          </el-table-column>   
          <el-table-column align="center" min-width="100px" label="营业开始时间" prop="openBtime">
          </el-table-column>   
          <el-table-column align="center" min-width="100px" label="营业结束时间" prop="openEtime">
          </el-table-column>   
          <el-table-column align="center" min-width="150px" label="门店介绍" prop="introduce">
          </el-table-column>   
          <el-table-column align="center" min-width="100px" label="商家资质" prop="qualification">
          </el-table-column>   
          <el-table-column align="center" min-width="80px" label="点餐开关" prop="isOrder">
            <template slot-scope="scope">
              <span v-if="scope.row.isOrder == '1'">开</span>
              <span v-if="scope.row.isOrder == '0'">关</span>
            </template>
          </el-table-column>   
          <el-table-column align="center" min-width="80px" label="预订开关" prop="isReservation">
            <template slot-scope="scope">
              <span v-if="scope.row.isReservation == '1'">开</span>
              <span v-if="scope.row.isReservation == '0'">关</span>
            </template>
          </el-table-column>   
          <el-table-column align="center" min-width="80px" label="外卖开关" prop="isTakeaway">
            <template slot-scope="scope">
              <span v-if="scope.row.isTakeaway == '1'">开</span>
              <span v-if="scope.row.isTakeaway == '0'">关</span>
            </template>
          </el-table-column>   
          <el-table-column align="center" label="操作" width="220" >
              <template slot-scope="scope">
                <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>

                <el-button type="danger" size="mini"  @click="handleUpdate(scope.row)">修改</el-button>

                <el-button type="danger" size="mini"  @click="handlePic(scope.row)">图片</el-button>
              </template>
          </el-table-column> 


        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
            :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>

        <!-- 修改对话框 -->
        <el-dialog title="添加竞拍商品" :visible.sync="addDialogFormVisible">
          <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
            <el-form-item label="平台编号" prop="platformId">
              <el-input v-model="this.platformId" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="店铺名称" prop="name"> 
              <el-input v-model="dataForm.name"></el-input>
            </el-form-item>                  

            <el-form-item label="店铺封面照片" prop="logoImg">
              <div  @click="upCover">
                <img v-if="dataForm.logoImg" :src="dataForm.logoImg">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              <input type="file" name="file" id="upload_cover" @change="uploadCover" accept="image/png,image/gif" style="display: none">
            </el-form-item> 
            <el-form-item label="区域" prop="area"> 
              <el-input v-model="dataForm.area"></el-input>
            </el-form-item>  
            <el-form-item label="纬度" prop="latitude"> 
              <el-input v-model="dataForm.latitude"></el-input>
            </el-form-item>  
            <el-form-item label="经度" prop="longitude"> 
              <el-input v-model="dataForm.longitude"></el-input>
            </el-form-item>  
            <el-form-item label="附加信息" prop="conService"> 
              <el-input v-model="dataForm.conService"></el-input>
            </el-form-item>  
            <el-form-item label="人均消费" prop="perCapitaSpending"> 
              <el-input v-model="dataForm.perCapitaSpending"></el-input>
            </el-form-item>  
            <el-form-item label="公告" prop="bulletin"> 
              <el-input v-model="dataForm.bulletin"></el-input>
            </el-form-item>  
            <el-form-item label="电话" prop="conMobile"> 
              <el-input v-model="dataForm.conMobile"></el-input>
            </el-form-item>  
            <el-form-item label="营业开始时间" prop="openBtime"> 
              <el-input v-model="dataForm.openBtime"></el-input>
            </el-form-item>  
            <el-form-item label="营业结束时间" prop="openEtime"> 
              <el-input v-model="dataForm.openEtime"></el-input>
            </el-form-item>  
            <el-form-item label="门店介绍" prop="introduce"> 
              <el-input v-model="dataForm.introduce"></el-input>
            </el-form-item> 
            <el-form-item label="商家资质" prop="qualification"> 
              <el-input v-model="dataForm.qualification"></el-input>
            </el-form-item>  
            <el-form-item label="点餐开关" prop="isOrder"> 
              <el-select v-model="dataForm.isOrder" placeholder="请选择" clearable="">
                <el-option value="1" label="开"></el-option>
                <el-option value="0" label="关"></el-option>
              </el-select>
            </el-form-item>  
            <el-form-item label="预订开关" prop="isReservation"> 
              <el-select v-model="dataForm.isReservation" placeholder="请选择" clearable="">
                <el-option value="1" label="开"></el-option>
                <el-option value="0" label="关"></el-option>
              </el-select>
            </el-form-item>  
            <el-form-item label="外卖开关" prop="isTakeaway"> 
              <el-select v-model="dataForm.isTakeaway" placeholder="请选择" clearable="">
                <el-option value="1" label="开"></el-option>
                <el-option value="0" label="关"></el-option>
              </el-select>
            </el-form-item>  
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取消</el-button>
            <el-button type="primary" v-if="dialogStatus == 'create'" @click="createData">确定</el-button>
            <el-button type="primary" v-if="dialogStatus == 'update'" @click="updateData">确定</el-button>
          </div>
        </el-dialog>


        <!-- 图片 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPic">
            <div style="margin-left:30px;">
                <el-button type="primary" size="small" @click="handleAddPic()">上传</el-button>
            </div>
            <el-table size="small" :data="picList" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row>
              
                <el-table-column align="center" min-width="80px" label="图片">
                  <template slot-scope="scope">
                    <img :src="scope.row.picture" />
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleDeletePic(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 添加图片 -->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="addPicFormVisible">
          <el-form :rules="rules1" ref="picForm" :model="picForm" status-icon label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
            <el-form-item label="平台编号" prop="platformId">
              <el-input v-model="picForm.platformId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品编号" prop="restaurantId">
              <el-input v-model="picForm.restaurantId" :disabled="true"></el-input>
            </el-form-item>               
            <el-form-item label="商品照片" prop="picture">
              <div  @click="upCover1">
                <img v-if="picForm.picture" :src="picForm.picture">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              <input type="file" name="file" id="upload_cover1" @change="uploadCover1" accept="image/png,image/gif" style="display: none">
            </el-form-item>  
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addPicFormVisible = false">取消</el-button>
            <el-button type="primary"  @click="createPic('picForm')">确定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
import { listRestaurantInfo, addRestaurantInfo, deleteRestaurantInfo, updateRestaurantInfo, deleteImg, addImg } from '@/api/cms/restaurant/restaurant'
import { mapGetters } from 'vuex'
import { uploadImg } from '@/api/cms/society/index'

export default {
  name: 'auction',
  directives: {
    waves
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        name: ''
      },
      list: [],
      total: 0,
      picList: [],
      listLoading: false,
      addDialogFormVisible: false,
      downloadLoading: false,
      dialogPic: false,
      addPicFormVisible: false,
      textMap: {
        update: '编辑',
        create: '创建',
        pic: '图片'
      },
      dialogStatus: '',
      dataForm: {
        platformId: '',
        name: '',
        logoImg: '',
        area: '',
        latitude: '',
        longitude: '',
        conService: '',
        perCapitaSpending: '',
        bulletin: '',
        conMobile: '',
        openBtime: '',
        openEtime: '',
        introduce: '',
        qualification: '',
        isOrder: '',
        isReservation: '',
        isTakeaway: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        isOrder: [
          {
            required: true,
            message: '请选择是否点餐',
            trigger: 'blur'
          }
        ],
        isReservation: [
          {
            required: true,
            message: '请选择是否预定',
            trigger: 'blur'
          }
        ],
        isTakeaway: [
          {
            required: true,
            message: '请选择是否外卖',
            trigger: 'blur'
          }
        ]
      },
      picForm: {
        platformId: '',
        merchantId: '',
        restaurantId: '',
        picture: ''
      },
      rules1: {
        picture: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'elements',
      'name',
      'platformId'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getList() {
      this.listLoading = true
      listRestaurantInfo(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    upCover1: function() {
      document.getElementById('upload_cover1').click()
    },
    uploadCover1(event) {
      if (event.target.files.length > 0) {
        this.file = event.target.files[0] // 提交的图片
        console.log(this.file)
        const param = new FormData() // 创建form对象
        param.append('file', this.file)
        uploadImg(param).then(response => {
          if (response.success) {
            this.picForm.picture = response.data.filePath
            alert('ok')
          }
        })
      }
    },

    handleAddPic() {
      this.dialogStatus = 'create'
      this.picForm.platformId = this.platformId
      this.picForm.merchantId = this.merchantId
      this.addPicFormVisible = true
    },
    createPic(formName) {
      this.$refs['picForm'].validate((valid) => {
        if (valid) {
          addImg(this.picForm).then(response => {
            this.addPicFormVisible = false
            this.dialogPic = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handlePic(row) {
      this.picList = row.pictureList
      this.dialogStatus = 'pic'
      this.picForm.restaurantId = row.restaurantId
      this.dialogPic = true
    },
    handleDeletePic(row) {
      this.$confirm('此操作将删除选中图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteImg(row)
            .then(response => {
              console.log(response)
              if (response.success) {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                })
                this.dialogPic = false
                this.getList()
              }
            })
        })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.addDialogFormVisible = true
      this.resetForm()
      this.dataForm.platformId = this.platformId

      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },

    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addRestaurantInfo(this.dataForm).then(response => {
            this.getList()
            this.addDialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将删除选中店铺, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRestaurantInfo(row)
            .then(response => {
              console.log(response)
              if (response.success) {
                this.$notify({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              }
            })
        })
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.addDialogFormVisible = true
      this.$nextTick(() => {
        this.dataForm = row
      })
    },
    updateData() {
      var openBtime = this.dataForm.openBtime
      this.dataForm.openBtime = openBtime.toString()
      var openEtime = this.dataForm.openEtime
      this.dataForm.openEtime = openEtime.toString()
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateRestaurantInfo(this.dataForm).then(response => {
            this.getList()
            this.addDialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    upCover: function() {
      document.getElementById('upload_cover').click()
    },
    uploadCover(event) {
      if (event.target.files.length > 0) {
        this.file = event.target.files[0] // 提交的图片
        console.log(this.file)
        const param = new FormData() // 创建form对象
        param.append('file', this.file)
        uploadImg(param).then(response => {
          if (response.success) {
            this.dataForm.logoImg = response.data.filePath
            alert('ok')
          }
        })
      }
    },
    resetForm() {
      this.dataForm = {
        name: '',
        logoImg: '',
        area: '',
        latitude: '',
        longitude: '',
        conService: '',
        perCapitaSpending: '',
        bulletin: '',
        conMobile: '',
        openBtime: '',
        openEtime: '',
        introduce: '',
        qualification: '',
        isOrder: '',
        isReservation: '',
        isTakeaway: ''
      }
    }
  }
}
</script>

<style>

</style>


